<template>
  <div
    class="home"
    :class="{ custom: layoutTable && layoutTable.grids.length > 0 }"
  >
    <!-- <flowArea height="260"></flowArea> -->
    <table
      class="layout-table"
      cellspacing="0"
      cellpadding="0"
      ref="layoutTable"
      v-if="layout.info"
    >
      <colgroup v-if="layoutTable.colsWidth.length > 0">
        <col
          v-for="(colw, index) in layoutTable.colsWidth"
          :key="index"
          :width="colw + '%'"
        />
      </colgroup>
      <tbody>
        <tr
          v-for="(row, ri) in layoutTable.grids"
          :key="ri"
          :style="{
            height: layoutTable.rowsHeight[ri] + 10 + 'px'
          }"
        >
          <td
            v-for="(col, ci) in row"
            :key="ci"
            v-show="col.colspan > 0 && col.rowspan > 0"
            :colspan="col.colspan"
            :rowspan="col.rowspan"
          >
            <iframe
              v-if="col.type == 2"
              :src="col.url"
              frameborder="0"
            ></iframe>
            <div
              v-else
              class="comps"
              :style="{
                height: layoutTable.rowsHeight[ri] + 'px'
              }"
            >
              <component
                v-bind:is="getCompn(col.url)"
                :height="layoutTable.rowsHeight[ri]"
              ></component>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <el-row v-else :gutter="20">
      <HomeLeft></HomeLeft>
      <HomeRight></HomeRight>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { HomeLeft, HomeRight } from "./components/index";
import commonTool from "@/views/com/commonTool/index.vue";
import messageNotice from "@/views/com/messageNotice/index.vue";
import officalDocument from "@/views/com/officalDocument/index.vue";
import doneArea from "@/views/com/doneArea";
import flowArea from "@/views/com/flowArea";

export default {
  data() {
    return {
      layoutTable: {
        colsWidth: [],
        rowsHeight: [],
        grids: []
      },
      comShow: true
    };
  },
  components: {
    doneArea,
    flowArea,
    HomeLeft,
    HomeRight,
    commonTool,
    messageNotice,
    officalDocument
  },
  computed: {
    ...mapGetters(["layout"])
  },
  watch: {
    layout(n) {
      if (n) {
        this.layoutTable = JSON.parse(n.info);
      } else {
        this.layoutTable.colsWidth = [];
        this.layoutTable.rowsHeight = [];
        this.layoutTable.grids = [];
      }
    }
  },
  created() {
    console.log("created", this.layout.info);
  },
  mounted() {
    console.log("mounted", this.layout.info);
    if (this.layout) {
      this.layoutTable = JSON.parse(this.layout.info);
    }

    // 兼容ie，手动设置所有 td 下 div.component 元素高度
    setTimeout(() => {
      if (window.ActiveXObject) {
        document.querySelectorAll(".layout-table .component").forEach(item => {
          item.style.height = item.parentNode.clientHeight + "px";
        });
      }
    }, 50);
  },
  methods: {
    getCompn(url) {
      const inlineCompn = [
        "commonTool",
        "messageNotice",
        "officalDocument",
        "flowArea",
        "doneArea"
      ];
      var act = "";

      inlineCompn.forEach(item => {
        if (url.includes(item)) {
          act = item;
        }
      });

      return act;
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  &.custom {
    margin-left: -10px;
    margin-top: -10px;
  }
  overflow-y: auto;
  overflow-x: hidden;
  /deep/ .el-row {
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  height: 100%;
  /deep/ .el-col {
    margin-bottom: 0;
  }
  .layout-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    td {
      position: relative;
      border: 10px solid #f1f1f5;
      iframe,
      > .comps {
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        // height: 100%;
        // overflow: auto;
        box-shadow: 2px 2px 4px #bbb;
      }
    }
  }
}
</style>
